<template>
  <div class="main">
    <div v-show="loading" class="loading" ref="loadingEle">
      <img src="../assets/images/loading-21.gif" alt="loading" srcset="" />
    </div>
    <div id="screen" class="map">
      <div class="m-header">
        <div class="h-left">
          <img
            class="h-l-img"
            src="../assets/images/h-t-bg2.png"
            alt=""
            srcset=""
          />
          <img src="../assets/images/h-t-bg.png" alt="" srcset="" />
          <!-- <img
            class="city-icon"
            src="../assets/images/city-icon.png"
            alt=""
            srcset=""
          /> -->
          <img
            class="h-txt"
            src="../assets/images/h-txt.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="h-right">
          <div class="hr-time">{{ serverTime }}</div>
          <div class="user" v-if="!isLogin">
            <div class="user-login"  @click="showLoginDialog">登录</div>
            <!-- <el-dropdown v-else>
              <span class="el-dropdown-link">
                <el-avatar :src="whLogoPng"></el-avatar>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            
          </div>
        </div>
        
      </div>
      <div class="m-body">
        <div class="b-left">
          <div class="drug">
            <div class="left-item drug-item drug-1">
              <div class="title">
                <div class="t-icon"></div>
                <div class="t-txt">实时业务数据跟进</div>
              </div>
              <div class="content">
                <div class="con-item">
                  <div class="con-label">预约总量(单)</div>
                  <div ref="orderDrugNumEle" class="con-value">{{ orderData?.totalAppointments }}</div>
                </div>
                <div class="con-item">
                  <div class="con-label">取药总量(单)</div>
                  <div ref="takeDrugNumEle" class="con-value">{{ orderData.totalTakeMedicine }}</div>
                </div>
                <div class="con-item">
                  <div class="con-label">待取总量(单)</div>
                  <div ref="readyGetDrugNumEle" class="con-value">{{ orderData.totalToBeTaken }}</div>
                </div>
              </div>
            </div>
            <div class="drug-item drug-2">
              <div class="title">
                <div class="t-icon"></div>
                <div class="t-txt">取药规律比例</div>
              </div>
              <div class="content">
                <div
                  class="drug-regular-echarts"
                  ref="drugRegularEchart"
                  v-chart-resize
                ></div>
              </div>
            </div>
          </div>
          <div class="year">
            <div class="title">
              <div class="t-icon"></div>
              <div class="t-txt">年度趋势</div>
              <div class="t-right"></div>
            </div>
            <div class="content">
              <div
                class="year-tread-chart"
                ref="yearTreadChart"
                v-chart-resize
              ></div>
            </div>
          </div>
          <div class="area">
            <!-- 辖区 -->
            <div class="title">
              <div class="t-icon"></div>
              <div class="t-txt">辖区情况</div>
              <div class="t-right"></div>
            </div>
            <div class="content">
              <div class="area-chart" ref="areaChart" v-chart-resize></div>
            </div>
          </div>
          <div class="disease">
            <div class="disease-item disease-1">
              <div class="title">
                <div class="t-icon"></div>
                <div class="t-txt">疾病排行</div>
                <div class="t-right"></div>
              </div>
              <div class="con-wrap">
                <div class="content">
                  <div class="con" v-for="(item,index) in orderData.diseaseRanking" :key="index">
                    <div class="eq eq1">{{( index+1 )}}</div>
                    <div :class="['icon',item.iconClass]"></div>
                    <div class="txt">{{ item.name }}</div>
                    <div class="value">{{ item.quantity }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="disease-item disease-2">
              <div class="title">
                <div class="t-icon"></div>
                <div class="t-txt">供应情况</div>
                <div class="t-right"></div>
              </div>
              <div class="content">
                <div class="row row1">
                  <div class="r-item">
                    <div class="r-i-num" ref="drugVarietyEle">{{ orderData.availability?.drugVariety}}</div>
                    <div class="r-i-txt">药品品种(种)</div>
                  </div>
                  <div class="r-item">
                    <div class="r-i-num" ref="coverDiseaseSpeciesEle">{{ orderData.availability?.coverDiseaseSpecies}}</div>
                    <div class="r-i-txt">覆盖病种(种)</div>
                  </div>
                </div>
                <div class="row row2">
                  <div class="r-item">
                    <div class="r-i-num" ref="outOfStockVarietiesEle">{{ orderData.availability?.outOfStockVarieties}}</div>
                    <div class="r-i-txt">缺货品种(种)</div>
                  </div>
                  <div class="r-item">
                    <div class="r-i-num" ref="drugsSoldEle">{{ orderData.availability?.drugsSold}}</div>
                    <div class="r-i-txt">已售(万盒)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="b-center">
          <div class="b-center-bg"></div>
          <div class="city-list">
            <div class="c-selected" @click="openAddress">
              <div class="c-s-icon"></div>
              <div class="c-s-txt">{{currentCity.label}}</div>
              <div class="arrow"></div>
            </div>
            <div :class="['c-options',addressOpen ? 'active':'inActive']" >
              <div :class="['c-item',item.value === currentCity.value ? 'disabled':'']" v-for="(item,index) in adddressOption" :key="index" @click="selectAddress(item)">{{ item.label }}</div>
            </div>
          </div>

          <div class="echart" ref="mapEchartEle" v-chart-resize></div>
          <div class="get-drug-status">
            <div class="title">
              <div class="t-icon"></div>
              <div class="t-txt">取药状态</div>
              <div class="t-right"></div>
            </div>
            <div class="cont-wrap">
              <div class="content" id="getDrugStatus">
                <transition-group tag="div" name="fade">
                  <div :class="['con-item', item.id % 2===0 ? 'even' :'']" v-for="(item) in drugTakingStatus.orders" :key="item.id">
                    <div class="ci-name">{{(item.name)}}</div>
                    <div class="ci-num">{{item.quantity}}盒</div>
                    <div class="ci-amount">￥{{parseInt(String(item.amount))}}</div>
                    <div class="ci-date">{{item.datetime.split(' ')[0]}}</div>
                  </div>
                </transition-group>
              </div>
            </div>
            <!-- <div class="cont-wrap">
              <div class="content scrollup" id="getDrugStatus">
                <template v-for="(item,index) in drugTakingStatus.orders.slice(0,10)" :key="item.id">
                  <transition name="fade">
                    <div :class="['con-item']" :key="index">
                      <div class="ci-name">{{(item.name)}}</div>
                      <div class="ci-num">{{item.quantity}}盒</div>
                      <div class="ci-amount">￥{{parseInt(String(item.amount))}}</div>
                      <div class="ci-date">{{item.datetime.split(' ')[0]}}</div>
                    </div>
                  </transition>
                </template>
              </div>
            </div> -->
            
          </div>
        </div>
        <div class="b-right">
          <div class="content">
            <div class="con-item">
              <div class="num" ref="regularPeopleNumEle">{{userStats.fregularPeopleNum}}</div>
              <div class="txt txt1">规律管理（人）</div>
            </div>
            <div class="con-item">
              <div class="num" ref="performanceTimesEle">{{userStats.fperformanceTimes}}</div>
              <div class="txt txt2">履约取药（次）</div>
            </div>
            <div class="con-item">
              <div class="num" ref="totalTransactionAmountEle">{{userStats.ftotalTransactionAmount}}</div>
              <div class="txt txt3">交易金额（元）</div>
            </div>
            <div class="con-item">
              <div class="num" ref="medicalSecurityEle">{{userStats.fmedicalSecurity}}</div>
              <div class="txt txt4">大病保障（人）</div>
            </div>
            <div class="con-item">
              <div class="num" ref="totalGuaranteeAmountEle">{{userStats.ftotalGuaranteeAmount}}</div>
              <div class="txt txt5">保障总额（元）</div>
            </div>
          </div>
        </div>
        <div class="order">
          <div class="title">
            <div class="t-icon"></div>
            <div class="t-txt">预约轮盘</div>
            <div class="t-right"></div>
          </div>
          <div class="content">
            <div class="canlendar">
              <div class="week">
                <div class="can-item">周一</div>
                <div class="can-item">周二</div>
                <div class="can-item">周三</div>
                <div class="can-item">周四</div>
                <div class="can-item">周五</div>
                <div class="can-item">周六</div>
                <div class="can-item">周日</div>
              </div>
              <div class="day-panel">
                <div :class="['can-item',item.active ? 'active':'']" v-for="(item,index) in appointments.orders" :key="index" :title="item.day">
                  <div :class="['inner',item.active ? 'active':'']">
                    <!-- 如果同时显示月份和边框的话，样式就会有问题 -->
                    <!-- <div class="ci-month" v-if="(item.month && !item.active)">{{ item.month +'月'}}</div> -->
                    <div class="ci-days"><span>{{ item.month && item.month +'.' }}</span>{{item.sDay}}</div>
                    <div class="ci-num" v-if="item.quantity">{{item.quantity}}</div>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 登录 -->
      <el-dialog
        v-model="loginDialogVisible"
        title="登录"
        width="30%"
      >
      <el-form :model="loginForm" label-width="80px" :rules="loginRules" ref="loginFormRef" style="width: 80%;">
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="loginForm.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLogin">登录</el-button>
          <el-button @click="resetLogin">重置</el-button>
        </el-form-item>
        </el-form>
      </el-dialog>

      <!-- <canvas id="myCanvas" :width="canvasSize" :height="canvasSize" ref="myCanvas"></canvas> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import 'echarts-gl'
import * as echarts from 'echarts'
import {
  ref,
  onMounted,
  onUnmounted,
  getCurrentInstance,
  onBeforeMount,
  reactive
} from 'vue'

import { getServerTime,getOrderStats,getDrugTakingStatus,getUserStats,getAppointments,getMapOrders,getUserInfo,loginApi } from '@/api/screen'
import { CountUp } from 'countup.js'
import dayjs from 'dayjs'
import wuhushiJson from '@/assets/js/wuhushi.json'
import taiyuanshiJson from '@/assets/js/taiyuanshi.json'
import qiannanzhouJson from '@/assets/js/qiannanzhou.json'
import * as ECharts from "echarts";
import * as CryptoJS from "crypto-js";
import { ElMessage, ElMessageBox } from 'element-plus'


import {useRoute} from 'vue-router'
import whLogoPng from '../assets/images/whlogo.png'

function setToken(token:string){
  localStorage.setItem('token',token)
}

function getToken(){
  return localStorage.getItem('token') || ''
}

let isLogin = ref(false)
let loginDialogVisible = ref(false)

let route = useRoute()
let enCodeAccessToken = route.query?.at as string
let token = ref('')
let loginForm = ref({
  username:'',
  password:''
})
let loginFormRef = ref()

let loginRules = reactive({
  username:[
    { required: true, message: '用户名不能为空', trigger: 'blur' },
  ],
  password:[
    { required: true, message: '密码不能为空', trigger: 'blur' },
  ]
})

if(enCodeAccessToken){
  let key = 'wanhu@123'
  enCodeAccessToken = decodeURIComponent(enCodeAccessToken)
  var bytes  = CryptoJS.AES.decrypt(enCodeAccessToken, key);
  token.value = bytes.toString(CryptoJS.enc.Utf8);
  setToken(token.value)
  
  // console.log('token:',token)
  // 如果token存在，则获取用户管理范围，否则提示用户登录。
  getUserInfo(token.value).then(res=>{
    // console.log('token res:',res)
    isLogin.value = true
  })
}else {
  token.value = getToken()
  if(token.value){
    isLogin.value = true
  }
}






function showLoginDialog(){
  // ElMessage({
  //   message:'message',
  //   duration:0
  // })
  loginDialogVisible.value = true
}

function hideLoginDialog(){
  loginDialogVisible.value = false
}

function submitLogin(){
  
  if(loginFormRef.value){
    loginFormRef.value?.validate(async (valid:Boolean)=>{
      if(valid){
        console.log('valid:',valid)
        // let formData = new FormData()
        // formData.append('username',loginForm.username)
        // formData.append('password',loginForm.password)
        let res = await loginApi(loginForm.value)
        console.log('res:',res)
        if(res && res.accessToken){
          isLogin.value = true
          token.value = res.accessToken
          setToken(res.accessToken)
          isLogin.value = true
          hideLoginDialog()
          ElMessage({
            type:'success',
            message:'登录成功'
          })
          
        }else{
          console.log('ElMessage:',ElMessage)
          ElMessage({
            type:'error',
            message:'用户名或者密码错误'
          })
        }
      }else {
        ElMessage({
          type:'error',
          message:'用户名或者密码不能为空'
        })
      }
    })
  }else {
    console.log('表单不存在')
    ElMessage({
      type:'error',
      message:'表单不存在'
    })
  }
}

function resetLogin(){
  
  loginFormRef.value?.resetFields()
}




let loading = ref<boolean>(true)

const internalInstance = getCurrentInstance()
let fitChartSize =
  internalInstance?.appContext.config.globalProperties.$fitChartSize

// 取药规律echarts
let drugRegularEchart = ref<any>(null)
let drugRegularEchartIns = ref<any>(null)
function initdrugRegularEchart(chartDom: any) {
  let myChart = echarts.init(chartDom.value)
  let option = {
   
    series: [
      {
        name: 'drugRegular',
        type: 'pie',
        percentPrecision:0,
        left:0,
        top:0,
        right:0,
        bottom:0,
        color: [
          '#EE3831',
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#338FE5' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#58B8F6' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        startAngle: '90',
        avoidLabelOverlap: false,
        radius: ['50%', '70%'],
        label: {
          show: true,
          position: 'outside',
          color: 'rgba(106, 210, 255, 1)',
          fontFamily: 'DIN Condensed-Bold',
          formatter: '{d}%\n{b}',
          distanceToLabelLine: 12,
          fontSize: fitChartSize(20)
        },
        labelLayout: {
          fontSize: fitChartSize(20),
          align: 'center'
        },
        labelLine: {
          show: true,
          length: fitChartSize(8),
          length2: fitChartSize(10)
        },

        data: [
          {
            value: orderData.value.totalTakeMedicine - orderData.value.regularMedication,
            name: '延期'
          },
          {
            value: orderData.value.regularMedication,
            name: '规律'
          }
        ]
      }
    ]
  }

  myChart.setOption(option)
  drugRegularEchartIns.value = myChart
}
// 年度趋势

let yearTreadChart = ref<any>(null)
let yearTreadChartIns = ref<any>(null)
function initYearTreadChart(chartDom: any) {

  let monthData:string[] = []
  let totalData:number[] = []
  let completedData:number[] = []
  orderData.value.annualTrends.forEach((item:any)=>{
    monthData.push(item.month+'月')
    totalData.push(item.total)
    completedData.push(item.completed)
  })

  let myChart = echarts.init(chartDom.value)
  let gridSizeX = '5%'
  let gridSizeY = '20%'
  let option: any = {
    grid: {
      x: gridSizeX,
      y: gridSizeY,
      x2: gridSizeX,
      y2: gridSizeY,
      left: fitChartSize(50)
    },
    xAxis: {
      type: 'category',
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ],
      axisLabel: {
        show: true,
        color: 'rgba(186, 207, 248, 0.6)',
        fontFamily: 'PingFang SC-Regular',
        fontSize: fitChartSize(14)
      },
    },
    
    yAxis: {
      type: 'value',
      show: true,
      axisLabel: {
        show: true,
        color: 'rgba(186, 207, 248, 0.6)',
        fontFamily: 'PingFang SC-Regular',
        fontSize: fitChartSize(14)
      },
      splitLine:{
        lineStyle:{
          color:'rgba(18,76,132,0.3)'
        }
      },
    },
    legend: {
      show: true,
      data: ['预约', '取药'],
      textStyle: {
        fontFamily: 'PingFang SC-Regular',
        fontSize: fitChartSize(14),
        color: '#bacff8'
      },
      right: '5%'
    },

    slient: true,
    series: [
      {
        name: '预约',
        data: [135, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135],
        type: 'line'
      },
      {
        name: '取药',
        data: [50, 30, 124, 118, 35, 47, 60, 50, 30, 24, 18, 35],
        type: 'line'
      }
    ]
  }
  myChart.setOption(option)
  yearTreadChartIns.value = myChart
}

let areaChart = ref<any>(null)
let areaChartIns = ref<any>(null)
async function initAreaChart(chartDom: any) {
  // 辖区data
  let areaData:string[] = []
  let totalData:number[] = []
  let completedData:number[] = []
  orderData.value.jurisdiction.forEach((item:any)=>{
    areaData.push(item.area)
    totalData.push(item.total)
    completedData.push(item.completed)
  })
  
  let myChart = echarts.init(chartDom.value)
  // let gridSizeX = fitChartSize(200)
  let gridSizeX = '5%'
  let gridSizeY = '20%'
  let axisStyle = {
    color: 'rgba(186, 207, 248, 0.6)',
    fontFamily: 'PingFang SC-Regular',
    fontSize: fitChartSize(14)
  }
  let option: any = {
    grid: {
      x: gridSizeX,
      y: gridSizeY,
      x2: gridSizeX,
      y2: gridSizeY,
      left: fitChartSize(80)
    },
    // slient: true,
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#FC655E' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#FDA49F' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#136CDA' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#62C7FC' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    ],
    xAxis: {
      type: 'category',
      data: areaData,
      axisLabel: {
        show: true,
        ...axisStyle
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        show: true,
        ...axisStyle
      },
      splitLine:{
        lineStyle:{
          color:'rgba(18,76,132,0.3)'
        }
      },
    },
    
    legend: {
      show: true,
      data: ['预约', '取药'],
      itemWidth: fitChartSize(14),
      itemHeight: fitChartSize(14),
      textStyle: {
        fontFamily: 'PingFang SC-Regular',
        fontSize: fitChartSize(14),
        color: '#bacff8'
      },
      right: '5%'
    },
    series: [
      {
        name: '预约',
        data: totalData,
        type: 'bar'
      },
      {
        name: '取药',
        data: completedData,
        type: 'bar'
      }
    ]
  }

  myChart.setOption(option)
  areaChartIns.value = myChart
}
let mapEchartEle = ref<any>(null)
let mapEchartIns = ref<any>(null)
async function initMapEchart(echartEle: any, addressJson:any): Promise<void> {

  // 各地区经纬度
  // let data 
  // 中心药房地址
  // 芜湖：118.394625,31.31192
  //  太原：112.528719,37.893443
  // 以弋江区为起点
  let startCoords = [
    118.394625,
    31.31192
  ]
  let targetCoords = [
    [
      117.902366,
      31.303168
      // 无为市
    ],
    [
      118.198514,
      31.101777
      // 繁仓区
    ],
    [
      118.391734,
      31.369373
      // 鸠江区
    ],
    [
      // 镜湖区
      118.38525,31.34038
    ],
    [
      // 南陵县
      118.33688,30.91969
    ]
  ]

  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(echartEle.value)
  myChart.showLoading()

  // 获取json数据
  // const wh_jsonData: any = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/340200_full.json').then(res=>{
  //   return res.json()
  // })
  const wh_jsonData = addressJson



  

  echarts.registerMap('areaMap', wh_jsonData as any)

  var regions = wh_jsonData.features.map(function (feature: any) {
    return {
      name: feature.properties.name,
      itemStyle: {
        color: Math.random() > 0.5 ? '#6AD2FF' : '#00fcfc'
      }
    }
  })
  let lines3DData = mapOrders.value.map((item:any)=>{
    return [
      startCoords,
      item
    ]
  })

  

  let options = {
    geo3D:{
      show: true,
      silent: true,
      map: 'areaMap',
      viewControl: {
        //用于鼠标的旋转，缩放等视角控制
        autoRotate: false,
        distance: 110,
        alpha: 80,
        zoomSensitivity: 0,
        panSensitivity: 0
      },

      regionHeight: 5.1,
      groundPlane: {
        show: false,
        realisticMaterial: {
          textureOffset: 0,
          detailTexture: '/web-bg.png'
        },
        color: '#fff'
        //
      },

      label: {
        show: true,
        color: 'white',
        fontSize: 14,
        fontWeight: 'bold',
        lineHeight: 20
      },
      itemStyle: {
        // color: '',
        borderWidth: 1,
        borderColor: 'rgb(0, 252, 252)'
      },
      regions: regions,
      shading: 'realistic',
      realisticMaterial: {
        detailTexture: '/map-wl11.jpg',
        roughness: 0.2,
        textureOffset: 0
      },
      light: {
        main: {
          color: '#fff',
          shadow: true,
          alpha: 30,
          beta: 40
        }
      },
      ambient: {
        color: '#000',
        intensity: 0.5
      }
    },
    series:[
      {
        type:'lines3D',
        name:'lines3D',
        coordinateSystem:'geo3D',
        effect: {
          show: true,
          trailWidth: 2,
          trailOpacity: 0.7,
          trailLength: 1,
          constantSpeed: 5
        },        
        data: lines3DData,
        lineStyle:{
          color:'white',
          width:2,
          opacity:0
        },
        blendMode:'lighter'
      }
    ]
  }

  myChart.setOption(options as any)
  myChart.hideLoading()
  mapEchartIns.value = myChart

  // // 监听浏览器窗口的变化
  // window.onresize = function () {
  //   myChart.resize()
  // }

}











// 默认使用芜湖数据
let currentCity = ref({
  label:'芜湖市',
  value:'wuhushi',
  json:wuhushiJson,
  cityId:340200
})
let serverTime= ref<string>()
let orderData = ref<any>({})


let diseaseMapIcon:any = {
  '高血压':'icon-gxy',
  '冠心病':'icon-gxb',
  '2型糖尿病':'icon-2xtnb',
  '脑血管病':'icon-nxgb',
  '高血脂':'icon-gxz',
  '前列腺增生':'icon-qlxzs',
  '胃溃疡':'icon-wky',
  '十二指肠溃疡':'icon-sezcky',
  '脑卒中':'icon-ncz',
  '肾功能不全':'icon-sgnbq',
  '骨质疏松':'icon-gzss',
}
type typeDiseaseRank = {
  name:string,
  quantity:number,
  iconClass:string
}
async function getOrderDataFn(){
  // 获取订单数据
  orderData.value = await getOrderStats(currentCity.value.cityId)
  // 给疾病排行添加icon
  orderData.value.diseaseRanking.forEach((item:typeDiseaseRank)=>{
    item.iconClass = diseaseMapIcon[item.name]
  })

}
type typeOrderItem = {
  id:number,
  name: string,
  quantity: number,
  amount: string, //金额
  datetime: string,
  active: boolean | undefined
}
type typeDrugStatus = {
  orders:typeOrderItem[]
}
let drugTakingStatus = ref<typeDrugStatus>({
  orders:[]
})
// 取药状态
async function getDrugTakingStatusFn() {
  let res = await getDrugTakingStatus(currentCity.value.cityId)
  res.orders.forEach((item:any,index:number)=>{
    item.id = item.id !== undefined ? item.id : index
  })
  drugTakingStatus.value = res
}
let takeIntervalHandler:any = null
function animateTakedrug(){
  if(takeIntervalHandler){
    clearInterval(takeIntervalHandler)
  }else {
    takeIntervalHandler = setInterval(()=>{
    drugTakingStatus.value.orders[0].active = true
    let deleteList = drugTakingStatus.value.orders.splice(0,1)
    let target = deleteList[0]
    setTimeout(()=>{
      delete target.active
      drugTakingStatus.value.orders.push(target)
    },0)
    
  },2000)
  }
}



let userStats:any = ref({})
// 正则表达式
const toThousands = (num = 0) => {
   return num.toString().replace(/\d+/, function(n) {
      return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1`');
   });
};
async function getUserStatsFn() {
  let data = await getUserStats(currentCity.value.cityId)
  let tempData:any = {}
  Object.keys(data).forEach(key=>{
    tempData[key] = data[key]
    tempData['f'+key] = toThousands(data[key])
  })
  userStats.value = tempData
}

let appointments:any = ref({})

async function getAppointmentsFn() {
  let data = await getAppointments(currentCity.value.cityId)
  let tempOrders = data.orders.map((item:any,index:number)=>{
    let tempDate = { ...item }
    let month = dayjs(item.day).month() + 1
    let sDay = dayjs(item.day).date()
    tempDate.sDay = sDay
    if(sDay === 1){
      tempDate.month = month
    }
    if(index ===0){
      // 当天
      tempDate.active = true
    }
    return tempDate
  })
  // 获取当前星期几
  let firstDate = data?.orders[0].day
  let weekDay = dayjs(firstDate).day()  // 4
  for(let i=1;i<weekDay;i++){
    // let tempDate = dayjs(firstDate).subtract(i,'day')
    // tempOrders.unshift({
    //   day:tempDate,
    //   sDay:tempDate.date(),
    //   quantity:'***',
    // })
    tempOrders.unshift({
      day:'',
      sDay:'',
      quantity:'',
    })
  }
  // console.log('tempOrders:',tempOrders)
  appointments.value = {
    orders:tempOrders
  }
}

let mapOrders:any = ref({})

async function getMapOrdersFn() {
  let data = await getMapOrders(currentCity.value.cityId)
  // console.log('data:',data)
  // let hasIncludes: string [] = []
  // let orders:object [] = data.orders.filter((item:Array<object>)=>{
  //   let itemStr = JSON.stringify(item)
  //   if(hasIncludes.includes(itemStr)){
  //     return false
  //   }else {
  //     hasIncludes.push(itemStr)
  //     return true
  //   }
  // })
  // console.log('orders:',orders.length)
  
  mapOrders.value = data.orders.map((item:any)=>{
    return [
      Number(item.latitude),
      Number(item.longitude)
    ]
  })
  // mapOrders.value.push([118.3378860000,30.9220700000])
}



// type typeCountUp  = type CountUp
function numberAnimate(refEle: HTMLElement,num:number,options:any) {
  if(refEle){
    options = options ? options : {}
    const countUp = new CountUp(refEle, num,options)
    if (!countUp.error) {
      countUp.start()
    } else {
      console.error(countUp.error)
    }
  }
  
  // numHandlerList.value.push(countUp)
}
let orderDrugNumEle = ref<HTMLElement>()
let takeDrugNumEle = ref<HTMLElement>()
let readyGetDrugNumEle = ref<HTMLElement>()
let drugVarietyEle = ref<HTMLElement>()
let coverDiseaseSpeciesEle = ref<HTMLElement>()
let outOfStockVarietiesEle = ref<HTMLElement>()
let drugsSoldEle = ref<HTMLElement>()
let regularPeopleNumEle = ref<HTMLElement>()
let performanceTimesEle = ref<HTMLElement>()
let totalTransactionAmountEle = ref<HTMLElement>()
let medicalSecurityEle = ref<HTMLElement>()
let totalGuaranteeAmountEle = ref<HTMLElement>()
// 以下为数字动画函数数组
let numAnimateList = ref<any>([
  (randomAddNum:number)=>{
    orderData.value.totalAppointments = orderData.value.totalAppointments + randomAddNum
    numberAnimate(orderDrugNumEle.value as HTMLElement,orderData.value.totalAppointments,{
      startVal:orderData.value.totalAppointments - randomAddNum
    })
    
  },
  (randomAddNum:number)=>{
    orderData.value.totalTakeMedicine = orderData.value.totalTakeMedicine + randomAddNum
    numberAnimate(takeDrugNumEle.value as HTMLElement,orderData.value.totalTakeMedicine,{
      startVal: orderData.value.totalTakeMedicine - randomAddNum
    })
  },
  (randomAddNum:number)=>{
    orderData.value.totalToBeTaken = orderData.value.totalToBeTaken + randomAddNum
    numberAnimate(readyGetDrugNumEle.value as HTMLElement,orderData.value.totalToBeTaken,{
      startVal: orderData.value.totalToBeTaken - randomAddNum
    })
  },
  // ()=>{
  //   numberAnimate(drugVarietyEle.value as HTMLElement,orderData.value.availability?.drugVariety)
  // },
  // ()=>{
  //   numberAnimate(coverDiseaseSpeciesEle.value as HTMLElement,orderData.value.availability?.coverDiseaseSpecies)
  // },
  // ()=>{
  //   numberAnimate(outOfStockVarietiesEle.value as HTMLElement,orderData.value.availability?.outOfStockVarieties)
  // },
  (randomAddNum:number)=>{
    orderData.value.availability.drugsSold = orderData.value.availability.drugsSold + randomAddNum
    numberAnimate(drugsSoldEle.value as HTMLElement,orderData.value.availability?.drugsSold,{
      startVal: orderData.value.availability.drugsSold - randomAddNum
    })
  },
  (randomAddNum:number)=>{
    userStats.value.regularPeopleNum = userStats.value.regularPeopleNum + randomAddNum
    numberAnimate(regularPeopleNumEle.value as HTMLElement,userStats.value.regularPeopleNum,{
      startVal: userStats.value.regularPeopleNum - randomAddNum
    })
  },
  (randomAddNum:number)=>{
    userStats.value.performanceTimes = userStats.value.performanceTimes + randomAddNum
    numberAnimate(performanceTimesEle.value as HTMLElement,userStats.value.performanceTimes,{
      startVal:userStats.value.performanceTimes - randomAddNum
    })
  },
  (randomAddNum:number)=>{
    userStats.value.totalTransactionAmount = userStats.value.totalTransactionAmount + randomAddNum
    numberAnimate(totalTransactionAmountEle.value as HTMLElement,userStats.value.totalTransactionAmount,{
      startVal: userStats.value.totalTransactionAmount - randomAddNum
    })
  },
  (randomAddNum:number)=>{
    userStats.value.medicalSecurity = userStats.value.medicalSecurity + randomAddNum
    numberAnimate(medicalSecurityEle.value as HTMLElement,userStats.value.medicalSecurity,{
      startVal: userStats.value.medicalSecurity - randomAddNum
    })
  },
  (randomAddNum:number)=>{
    userStats.value.totalGuaranteeAmount = userStats.value.totalGuaranteeAmount + randomAddNum
    numberAnimate(totalGuaranteeAmountEle.value as HTMLElement,userStats.value.totalGuaranteeAmount,{
      startVal:userStats.value.totalGuaranteeAmount - randomAddNum
    })
  }
])
// 生成随机数
function randomNum(min:number,max:number){
  return Math.floor(Math.random()*(max-min) + min)
}

function randomNumAnimate(){
  let animateIndex = randomNum(0,numAnimateList.value.length)
  let randomAddNum = randomNum(1,5)

  numAnimateList.value[animateIndex](randomAddNum)
  // 递增数字
  
  let timeNum = randomNum(1000,5000)
  setTimeout(()=>{
    randomNumAnimate()
  },timeNum)
}

function startNumAnimate(){
  numAnimateList.value.forEach((fn:any)=>{
    // let randomAddNum = randomNum(1,5)
    fn(0)
  })
  setTimeout(()=>{
    randomNumAnimate()
  },1000)
}

let adddressOption=ref([
  {
    label:'太原市',
    value:'taiyuanshi',
    json:taiyuanshiJson,
    cityId:140100
  },
  {
    label:'芜湖市',
    value:'wuhushi',
    json:wuhushiJson,
    cityId:340200
  },
  {
    label:'黔南州',
    value:'qiannanzhou',
    json:qiannanzhouJson,
    cityId:522700
  }
])


function init(){
  // 所有的echart 注销
  let dRChart = echarts.getInstanceByDom(drugRegularEchart.value)
  if(dRChart){
    dRChart.dispose()
  }
  let yTChart = echarts.getInstanceByDom(yearTreadChart.value)
  if(yTChart){
    yTChart.dispose()
  }

  let aChart = echarts.getInstanceByDom(areaChart.value)
  if(aChart){
    aChart.dispose()
  }

  let mChart = echarts.getInstanceByDom(mapEchartEle.value)
  if(mChart){
    mChart.dispose()
  }

  Promise.all([getOrderDataFn(),getDrugTakingStatusFn(),getUserStatsFn(),getAppointmentsFn(),getMapOrdersFn()]).then(()=>{
    initdrugRegularEchart(drugRegularEchart)
    initYearTreadChart(yearTreadChart)
    initAreaChart(areaChart)
    initMapEchart(mapEchartEle,currentCity.value.json)
    setTimeout(()=>{
      loading.value = false
    },1000)
    
    setTimeout(() => {
      // 动画
      
      startNumAnimate()
      animateTakedrug()
      // numberAnimate(orderDrugNumEle.value as HTMLElement,23478)
    }, 2000)
  })
}

let addressOpen = ref<boolean>(false)
function openAddress(){
  addressOpen.value = !addressOpen.value
}
function selectAddress(item:any){
  currentCity.value = item
  addressOpen.value = false
  init()
}

onBeforeMount(async () => {

  // 以下是接口请函数
  // 开始本地计时,避免重复请求接口
  let timeHandler:any = null
  function startCountTime(timeStamp:number){
    
    timeHandler = setTimeout(()=>{
      timeStamp+= 1000
      serverTime.value = dayjs(timeStamp).format('YYYY-MM-DD HH:mm:ss')
      // 每1个小时，重新请求一次数据
      if(serverTime.value.includes(':00:')){
        // init()
      }else{
        startCountTime(timeStamp)
      }
      
    },1000)
    
  }

  // 获取系统时间
  async function getServerTimeFn() {
    let res = await getServerTime()
    serverTime.value = res.dateTime
    let timeStamp = (new Date(res.dateTime)).getTime()
    if(timeHandler){
      clearTimeout(timeHandler)
    }
    startCountTime(timeStamp)
  }
  getServerTimeFn()
  // 每一天从服务器请求下，更新下时间
  setInterval(getServerTimeFn,86400)

})
// window尺寸变化的时候，重新初始化echart。添加防抖代码，避免重复运行多次
/* 
    fn : 回调函数  传进来的是正真的业务逻辑
    delay : 延时时间
*/
function debounce(fn:Function, delay:number) {
  let time:any = null;//time用来控制事件的触发
  return function () {
      if (time !== null) {
          clearTimeout(time);
      }
      time = setTimeout(() => {
          fn();
          //利用call(),让this的指针从指向window 转成指向input
      }, delay)
  }
}

function resizeEchart(){
  // let drugRegularEchartIns = ECharts.getInstanceByDom(drugRegularEchart.value)
  // let yearTreadChartIns = ECharts.getInstanceByDom(yearTreadChart.value)
  // let areaChartIns = ECharts.getInstanceByDom(areaChart.value)
  // let mapEchartIns =  ECharts.getInstanceByDom(mapEchartEle.value)
  drugRegularEchartIns.value?.resize()
  yearTreadChartIns.value?.resize()
  areaChartIns.value?.resize()
  mapEchartIns.value?.resize()
}


onMounted(() => {
  // console.log('orderData.value:',orderData.value)
  init()
 
  window.addEventListener('resize',()=>{
    console.log('window.onresize')
    resizeEchart()
  })
})
onUnmounted(() => {
  window.onresize = null
  
})
</script>

<style lang="scss" scoped>


@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@keyframes diseaseFanye {
  0% {
    transform: translateY(0);
  }
  25%{
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11.6vh);
  }
  75% {
    transform: translateY(-11.6vh);
  }
  100% {
    transform: translateY(0vh);
  }
}

@keyframes spreadHeight{
  0% {
    height: 0;
  }
  100% {
    height: vh(84);
  }
}

@keyframes closeHeight{
  0% {
    height: vh(84);
  }
  100% {
    height: 0;
  }
}


.tdstatus-move,
.tdstatus-enter-active,
.tdstatus-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.tdstatus-enter-from,
.tdstatus-leave-to{
  opacity: 0!important;
  transform: translateY(-5vh)!important;
}

.tdstatus-leave-active {
  position: absolute!important;
} 


.fade-leave-from,.fade-leave {
  opacity: 1
}
.fade-leave-to{
  opacity: 0;
  transform: translateY(-10vh);
}




.main{
  width: 100%;
  height: vh(1080);
  background:radial-gradient(#082f64,#041127);
}
.loading{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #041229;
  z-index: 1000;
  img{
    width: vw(160);
    height: vw(160);
  }
}

.map {
  width: 100%;
  height: vh(1080);
  margin: auto;
  background-color: #041229;
  padding: 0 vw(30);
  box-sizing: border-box;
  background-image: url('../assets/images/h-bar.png');
  background-repeat: no-repeat;
  background-size: vw(1920) vh(108);
  font-family: 'DIN Condensed-Bold';
  color: #bacff8;
  .title {
    width: 100%;
    padding-left: vw(12);
    padding-right: vw(12);
    display: flex;
    align-items: center;
    height: vh(44);
    box-sizing: border-box;
    position: relative;
    background-color: rgba(113, 161, 255, 0.1);
    &::after{
      content:'';
      position:absolute;
      height: vh(1);
      width: 100%;
      bottom:0;
      left: 0;
      background-image: linear-gradient(to right,rgba(255, 255, 255, 0),rgba(36, 211, 228, 0.6),rgba(255, 255, 255, 0));
    }
    .t-icon {
      width: vw(28);
      height: vw(28);
      background-size: 100% 100%;
    }
    .t-txt {
      margin-left: vw(10);
      font-size: vw(20);
      font-family: 'PingFang SC-Regular';
      font-weight: 500;
      color: #bacff8;
    }
  }
  .m-header {
    width: 100%;
    height: vh(108);
    padding-top: vh(24);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .h-left {
      position: relative;
      img {
        width: vw(550);
        height: vh(72);
      }
      .h-l-img {
        position: absolute;
        left: vw(50);
        top: 0;
      }
      .h-txt {
        position: absolute;
        width: vw(324);
        height: vh(42);
        left: vw(100);
        top: vh(10);
      }
      .city-icon {
        width: vw(48);
        height: vw(48);
        position: absolute;
        left: vw(40);
        top: vh(7);
      }
    }
    .h-right {
      height: vh(72);
      font-size: vw(24);
      font-family: 'DIN Condensed-Bold';
      font-weight: bold;
      color: #a5b2ca;
      background-image: url('../assets/images/time-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      
      margin-top: vh(-24);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .hr-time{
        height: vh(72);
        line-height: vh(72);
        letter-spacing: vw(2);
        font-size: vw(24);
      }
      .user{
        height: vh(72);
        font-size: vw(20);
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
        margin-left: vw(20);
        letter-spacing: vw(2);
        
        .el-avatar{
          width: vw(40);
          height: vw(40);
        }
      }
    }
  }
  .m-body {
    margin-top: vh(16);
    position: relative;
    width: 100%;
    height: 87vh;
    display: flex;
    align-items: center;
    font-size: vw(14);
    // justify-content: space-between;
    .b-left {
      width: vw(550);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: inherit;
      // 多个块公用title格式

      .drug {
        width: inherit;
        height: vh(190);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .drug-item {
          width: vw(270);
          height: inherit;
          background-image: url('../assets/images/b-l-1.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
        
          &.drug-1 {
            .t-icon {
              background-image: url('../assets/images/b-l-time.png');
            }
          }
          &.drug-2 {
            .t-icon {
              background-image: url('../assets/images/get-icon.png');
            }
          }
        }
        .content {
          width: vw(270);
          height: vh(146);
          padding: 0 vw(20);
          font-size: vw(14);
          font-family: 'PingFang SC-Regular', 'PingFang SC';
          font-weight: 400;
          color: #a1bbef;
          display: flex;
          // align-items: center;
          flex-direction: column;
          justify-content: space-evenly;
          .con-item {
            display: flex;
            align-items: center;
            justify-content: space-around;
           
            .con-label {
            }
            .con-value {
              margin-left: vw(12);
              font-size: vw(30);
              font-family: 'DIN Condensed-Bold';
              font-weight: bold;
              color: #6ad2ff;
            }
          }
        }
        .drug-regular-echarts {
          width: 100%;
          height: vh(144);
          canvas{
            width: 100%;
            height: 100%;
          }
        }
      }
      .year {
        width: inherit;
        margin-top: vh(12);
        height: vh(228);
        background-size: 100% 100%;
        background-image: url('../assets/images/b-l-y-bg.png');
        box-sizing: border-box;
        .title {
          .t-icon {
            background-image: url('../assets/images/y-t-icon.png');
          }
          .t-right {
            width: vw(135);
            height: vh(22);
            background-size: 100%;
            background-image: url('../assets/images/y-right.png');
            order: 1;
            margin-left: auto;
          }
        }
        .content {
          width: vw(540);
          height: vh(184);
          .year-tread-chart {
            width: 100%;
            height: vh(184);
          }
        }
      }
      .area {
        width: inherit;
        margin-top: vh(12);
        height: vh(240);
        background-size: 100% 100%;
        background-image: url('../assets/images/b-l-qu.png');
        box-sizing: border-box;
        .title {
          .t-icon {
            background-image: url('../assets/images/b-l-qu-icon.png');
          }
          .t-right {
            width: vw(135);
            height: vh(22);
            background-size: 100%;
            background-image: url('../assets/images/y-right.png');
            order: 1;
            margin-left: auto;
          }
        }
        .content {
          width: vw(540);
          height: vh(196);
          .area-chart {
            width: 100%;
            height: inherit;
          }
        }
      }
      .disease {
        width: inherit;
        margin-top: vh(12);
        height: vh(233);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .disease-item {
          width: vw(270);
          height: vh(233);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .disease-1 {
          background-size: 100% 100%;
          background-image: url('../assets/images/b-l-disease-bg.png');
          .t-icon {
            background-image: url('../assets/images/b-l-disease-icon.png');
          }
          .con-wrap{
            width: 100%;
            height: vh(192);
            overflow: hidden;
            
          }
          .content {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            font-size: vw(14);
            font-family: 'PingFang SC-Regular';
            font-weight: 400;
            color: #bacff8;
            box-sizing: border-box;
            margin-top: vh(-2);
            will-change: transform;
            animation: diseaseFanye 10s infinite ease-in-out;
            .con {
              height: vh(32);
              line-height: vh(30);
              width: 100%;
              display: flex;
              align-items: center;
              padding-left: vw(14);
              padding-right: vw(14);
              box-sizing: border-box;
              &:nth-of-type(even) {
                background-color: rgba(23, 140, 232, 0.1);
              }
              .eq {
                color: #178ce8;
                opacity: 0.4;
                width: 1.2vw;
                text-align: center;
                &.eq1,
                &.eq2,
                &.eq3 {
                  color: #fd918b;
                }
              }
              .icon {
                width: vw(16);
                height: vw(16);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-left: vw(10);
                &.icon-gxb {
                  background-image: url('../assets/images/gxy.png');
                }
                &.icon-gxy {
                  background-image: url('../assets/images/gxy.png');
                }
                &.icon-2xtnb {
                  background-image: url('../assets/images/tnb.png');
                }
                &.icon-nxgb {
                  background-image: url('../assets/images/nxgb.png');
                }
                &.icon-gxz {
                  background-image: url('../assets/images/gxz.png');
                }
                &.icon-qlxzs {
                  background-image: url('../assets/images/qlxzs.png');
                }
                &.icon-wky {
                  background-image: url('../assets/images/wky.png');
                }
                &.icon-sezcky {
                  background-image: url('../assets/images/sezcky.png');
                }
                &.icon-ncz {
                  background-image: url('../assets/images/ncz.png');
                }
                &.icon-sgnbq {
                  background-image: url('../assets/images/sgnbq.png');
                }
                &.icon-gzss {
                  background-image: url('../assets/images/gzss.png');
                }
              }
              .txt {
                margin-left: vw(10);
                word-break: keep-all;
                overflow: hidden;
                width: 6vw;
                text-overflow: ellipsis;
              }
              .value {
                color: rgba(113, 161, 255, 1);
                opacity: 0.4;
                margin-left: auto;
                
              }
            }
          }
        }
        .disease-2 {
          background-size: 100% 100%;
          background-image: url('../assets/images/b-l-disease-bg.png');
          .t-icon {
            background-image: url('../assets/images/b-l-disease-gongyin.png');
          }
          .content {
            height: vh(196);
            .row {
              width: 100%;
              height: 50%;
              display: flex;
              align-items: center;

              .r-item {
                width: 50%;
                text-align: center;
                .r-i-num {
                  font-size: vw(30);
                  font-family: 'DIN Condensed-Bold';
                  font-weight: bold;
                  color: #6ad2ff;
                }
                .r-i-txt {
                  font-size: vw(14);
                  font-family: 'PingFang SC-Regular';
                  color: rgba(186, 207, 248, 0.6);
                }
              }
            }
          }
        }
      }
    }
    .b-center {
      width: 60vw;
      position: relative;
      height: inherit;
      margin-left: vw(12);
      overflow: hidden;
      .b-center-bg {
        width: vw(1000);
        height: vw(1000);
        position: absolute;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url('/web-bg.png');
        left: 45%;
        top: 45%;
        margin-left:vw(-500);
        margin-top:vh(-500);
        animation: rotate 240s linear infinite;
      }
      .city-list {
        position: absolute;
        top: 0;
        left: 0;
        width: vw(190);
        z-index: 10;
        cursor: pointer;
        .c-selected {
          width: inherit;
          height: vh(44);
          display: flex;
          align-items: center;
          // border: vh(1) solid rgba(113, 161, 255, 1);
          padding-left: vw(12);
          padding-right: vw(12);
          box-sizing: border-box;
          background-size: contain;
          background-image: url('../assets/images/address-bg.png');
          background-repeat: no-repeat;
          .c-s-icon {
            width: vw(28);
            height: vw(28);
            background-size: 100%;
            background-image: url('../assets/images/address.png');
          }
          .c-s-txt {
            margin-left: vw(12);
            font-size: vw(20);
            font-family: 'PingFang SC-Regular';
            color: #bacff8;
          }
          .arrow {
            margin-left: vw(20);
            width: vw(10);
            height: vw(8);
            background-image: url('../assets/images/arrow.png');
            background-size: 100% 100%;
          }
        }
        .c-options {
          width: inherit;
          margin-top: vh(9);
          overflow: hidden;
          will-change: height;
          cursor: pointer;
          &.active{
            animation: spreadHeight 0.5s normal;
            height: vh(84);
          }
          &.inActive{
            animation: closeHeight 0.5s normal;
            height: vh(0);
          }
          .c-item {
            width: inherit;
            height: vh(28);
            text-align: center;
            line-height: vh(28);
            background: rgba(113, 161, 255, 0.1);
            font-size: vw(14);
            font-family: 'PingFang SC-Regular';
            font-weight: 400;
            color: #bacff8;
            cursor: pointer;
            &.disabled{
              cursor: not-allowed;
              color: gray;
            }
            &:nth-child(even) {
              background: rgba(113, 161, 255, 0.15);
            }
          }
        }
      }
      .get-drug-status {
        position: absolute;
        left: 0;
        bottom: 0;
        width: vw(312);
        height: vh(156);
        background-image: url('../assets/images/b-c-drug-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .t-icon {
          background-image: url('../assets/images/b-c-drug-icon.png');
        }
        .cont-wrap{
          width: vw(312);
          height: vh(110);
          overflow: hidden;
        }
        .content {
          width: vw(312);
          font-size: vw(14);
          font-family: 'PingFang SC-Regular';
          color: '#b2cff8';
          position: relative;
          .con-item {
            width: vw(312);
            height: vh(28);
            padding-left: vw(10);
            padding-right: vw(10);
            display: flex;
            line-height: vh(28);
            justify-content: space-between;
            box-sizing: border-box;
            transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
            &.even {
              background: rgba(113, 161, 255, 0.1);
            }
            div{
              word-break: keep-all;
              overflow: hidden;
            }
            .ci-name{
              width: 3.5vw;
              flex-shrink: 0;
            }
            .ci-num{
              width: 2.5vw;
              flex-shrink: 0;
            }
            .ci-amount{
              width: 4vw;
              flex-shrink: 0;
            }
            .ci-date{

            }
          }
        }
      }
      .echart {
        width: vw(800);
        height: vw(800);
        position: absolute;
        // outline: 1px solid red;
        left: 45%;
        top: 50%;
        transform: translate(-50%,-50%);
        
      }
    }
    .b-right {
      position: absolute;
      height: inherit;
      width: vw(200);
      top: 0;
      right: 0;

      .content {
        text-align: right;
        .con-item {
          margin-bottom: vh(5);
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .num {
            font-size: vw(48);
            font-family: 'DIN Condensed-Bold';
            font-weight: bold;
            color: #70fdfd;
          }
          .txt {
            margin-top: vh(-5);
            font-size: vw(20);
            font-family: 'PingFang SC-Regular';
            font-weight: 400;
            color: #bacff8;
            width: 7.4vw;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            margin-right: -0.2vw;
            &:before {
              content: '';
              display: inline-block;
              width: vw(20);
              height: vw(20);
              margin-right: vw(5);
              background-repeat: no-repeat;
              background-size:contain;
            }
            &.txt1 {
              &:before {
                background-image: url('../assets/images/person-icon.png');
              }
            }
            &.txt2 {
              &:before {
                background-image: url('../assets/images/drug.png');
              }
            }
            &.txt3 {
              &:before {
                // width: vw(22);
                // height: vw(22);
                background-image: url('../assets/images/money.png');
              }
            }
            &.txt4 {
              &:before {
                background-image: url('../assets/images/bz.png');
              }
            }
            &.txt5 {
              &:before {
                background-image: url('../assets/images/money2.png');
              }
            }
          }
        }
      }
    }
    .order {
      width: vw(416);
      height: vw(378);
      position: absolute;
      bottom: 0;
      right: 0;
      background-image: url('../assets/images/order-bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
      .title {
        background: rgba(23, 140, 232, 0.3);
        .t-icon {
          background-image: url('../assets/images/b-c-drug-icon.png');
        }
        .t-right {
          width: vw(135);
          height: vh(22);
          background-size: 100%;
          background-image: url('../assets/images/y-right.png');
          order: 1;
          margin-left: auto;
        }
      }
      .content {
        width: 100%;
        height: vw(338);
        margin: auto;
        background: rgba(23, 140, 232, 0.3);

        .canlendar {
          // outline: 1px solid green;
          width: inherit;
          height: inherit;
          
          .week {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            height: vw(30);
            .can-item {
              text-align: center;
              // width: vw(44);
              height: inherit;
              display: flex;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
            }
          }
          .day-panel {
            display: grid;
            grid-template-columns: repeat(7, vw(58));
            grid-template-rows: repeat(5, vw(58));
            justify-content: space-evenly;
            overflow: hidden;
            font-size: vw(12);
            width: 100%;
            align-content: space-evenly;
            margin-top:vw(10);
            .can-item {
              position: relative;
              font-size: vw(10);
              box-sizing: border-box;
              // outline: 1px solid red;
              
              &.active{
                border: 1px solid #70fdfd;
              }
              
              .inner{
                width: inherit;
                height: inherit;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding-top:vw(3);
                &.active{
                  background-size: 100%;
                  background-repeat: no-repeat;
                  background-image: linear-gradient(to right,rgba(16, 68, 128, 1),rgba(9, 39, 95, 1));
                }
                
              }
              .ci-month {
                font-size: vw(10);
                font-family: 'PingFang SC-Regular';
                font-weight: 400;
                color: #fc7f79;
                position: absolute;
                top: vh(-15);
                text-align: center;
              }
              .ci-days {
                font-size: vw(12);
                font-family: 'PingFang SC-Regular';
                font-weight: 500;
                color: #ffffff;
                overflow: hidden;
                text-align: center;
              }
              .ci-num {
                font-size: vw(12);
                font-family: 'PingFang SC-Regular';
                font-weight: 400;
                color: #51b0f3;
                overflow: hidden;
                word-break: keep-all;
                width: 100%;
                overflow: hidden;
                text-align: center;
              }
            }
            
          }
        }
      }
    }
  }
}
</style>


